<template>
  <view class="register-box">
    <view>
      <topCard title="欢迎注册荣耀殿堂" subtitle="已有账号？请登录"></topCard>
    </view>
    <view class="register-box-center">
      <uni-easyinput
        class="login"
        styleOther="width: 83vw; margin-top: 20rpx; height: 80rpx; flex: 0.1"
        :styles="styles"
        type="text"
        :inputBorder="false"
        v-model="inputName"
        placeholder="请输入用户名"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      />
      <uni-easyinput
        class="login"
        styleOther="width: 83vw; margin-top: 20rpx; height: 80rpx; flex: 0.1"
        :styles="styles"
        type="password"
        :inputBorder="false"
        v-model="inputPsd"
        placeholder="请输入密码"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      />
      <uni-easyinput
        class="login"
        styleOther="width: 83vw; margin-top: 20rpx; height: 80rpx; flex: 0.1"
        :styles="styles"
        type="number"
        :inputBorder="false"
        v-model="inputPhone"
        placeholder="请输入手机号"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      />
      <view class="input-box">
        <view class="code">
          <uni-easyinput
            class="login"
            :styles="styles"
            type="number"
            :inputBorder="false"
            v-model="inputCode"
            placeholder="输入验证码"
            placeholderStyle="color: #ffffff;font-size: 31rpx;"
          />
        </view>
        <button class="in-btn" @click="startCountdown" :disabled="disabled">
          {{ disabled === true ? countdown + "秒后发送" : "发送验证码" }}
        </button>
      </view>
    </view>
    <view class="apply">
      <view class="register-box-bottom" @click="register">申请注册</view>
      <view class="agreen">
        <!-- <view class="checkArgeen"></view> -->
        <checkbox
          class="check-box"
          value="cb"
          style="transform: scale(0.6)"
          :checked="checked"
          @click="getContent"
        />
        <view
          >我已阅读并同意<text
            style="color: #5590f6"
            @click="getuserprotocol(1)"
            >《用户服务协议》</text
          >和<text style="color: #5590f6" @click="getuserprotocol(2)"
            >《隐私政策》</text
          ></view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import topCard from "./components/top-card/top-card.vue";
import { userSmsRegister, usergGetSms, getUUID } from "@/api/login";

const { proxy } = getCurrentInstance();
const styles = ref({
  color: "#ffffff",
  backgroundColor: "#ffffff33",
  borderColor: "#ffffff",
});
const list = ref([
  {
    defaultText: "输入用户名",
  },
  {
    defaultText: "输入密码",
  },
  {
    defaultText: "输入手机号",
  },
  {
    defaultText: "输入验证码",
    testFlag: true,
  },
]);
const checked = ref(false);
const inputName = ref("");
const inputPsd = ref("");
const inputPhone = ref("");
const inputCode = ref("");
const uuID = ref("");
const countdown = ref(30);
const disabled = ref(false);
function getContent() {
  checked.value = !checked.value;
}

function getuserprotocol(data) {
  uni.navigateTo({
    url: `/package_login/pages/login/protocol?id=${data}`,
  });
}
function isValidChinesePhoneNumber(phoneNumber) {
    return /^1[3-9]\d{9}$/.test(phoneNumber);
}
function startCountdown() {
  if (inputPhone.value == "") {
    proxy.modal.msg("手机号不能为空");
    return;
  } else if (!isValidChinesePhoneNumber(inputPhone.value)) {
    proxy.modal.msg("请输入正确的手机号");
    return;
  }

  // 获取幂等值
  getUUID({
    phone: inputPhone.value,
  }).then((res) => {
    // console.log(res.data);
    uuID.value = res.data;
    console.log(uuID.value);
    // 获取短信验证码
    usergGetSms({
      mdKey: uuID.value,
      phoneNumberArray: [inputPhone.value],
      templateId: 2053185,
    }).then((res) => {
      if (res.code == 200) {
        countdown.value = 30; // 设置倒计时初始值
        disabled.value = true;
        const timer = setInterval(() => {
          if (countdown.value > 0) {
            countdown.value--; // 每秒减1
          } else {
            clearInterval(timer); // 倒计时结束，清除定时器
            disabled.value = false;
          }
        }, 1000);
      }
      proxy.modal.msg(res.msg);
      console.log(res);
    });
  });
}

function register() {
  if (inputName.value == "") {
    proxy.modal.msg("用户名不能为空");
    return;
  }
  if (inputPsd.value == "") {
    proxy.modal.msg("密码不能为空");
    return;
  }
  if (inputPhone.value == "") {
    proxy.modal.msg("手机号不能为空");
    return;
  }
  if (inputCode.value == "") {
    proxy.modal.msg("验证码不能为空");
    return;
  }
  if (!checked.value) {
    proxy.modal.msg("请勾选并阅读《用户服务协议》和《隐私政策》");
    return;
  }
  // 请求注册接口
  userSmsRegister({
    account: inputName.value,
    password: inputPsd.value,
    phoneNumber: inputPhone.value,
    phoneCode: inputCode.value,
  })
    .then((res) => {
      console.log(res);
      proxy.modal.msg(res.msg);
      uni.showToast({
        // title: JSON.stringify(res),
        title: "注册成功",
        duration: 2000,
      });
      setTimeout(() => {
        uni.navigateTo({
          url: "/package_login/pages/login/login",
        });
      }, 2000);
    })
    .catch((err) => {
      if (err.data.msg == "验证码不正确！") {
        inputCode.value = "";
      }
    });
}
</script>

<style lang="less">
.register-box {
  display: flex;
  flex-direction: column;
  background-image: @login-img;
  justify-content: space-around;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;

  .register-box-center {
  }

  .apply {
    .register-box-bottom {
      width: 80vw;
      height: 5vh;
      color: #ffffff;
      border-radius: 6rpx;
      font-family: "ali";
      font-size: 31.3rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1rem;
      background-color: #00b588;
    }

    .agreen {
      margin-top: 1rem;
      color: #ffffff;
      font-size: 23rpx;
      display: flex;
      align-items: center;
      font-family: "ali";
      justify-content: center;

      .checkArgeen {
        width: 28rpx;
        height: 28rpx;
        background-color: #5d5d6880;
        border-radius: 50%;
        border: 0.5px solid #ffffff;
        margin-right: 0.5rem;
      }

      .check-box {
        .uni-checkbox-wrapper {
          .uni-checkbox-input {
            // border-radius: 50% !important;
            background: transparent !important;
          }
        }
      }
    }
  }
}

.input-box {
  font-family: "ali";
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  position: relative;
  .code {
    width: 56vw;
  }

  .uni-input-placeholder {
    color: #ffffff;
  }

  .in-btn {
    width: 25vw;
    /* #ifdef MP-WEIXIN */
    height: 35px;
    line-height: 35px;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    height: 70rpx;
    line-height: 70rpx;
    /* #endif */
    background-color: #5590f6;
    color: white;
    position: absolute;
    top: auto;
    font-size: 23.48rpx;
    right: 0;
  }
}
</style>
